재미있는 기억만 남기자

# 옵셔널 체이닝 ?.

  • ?. 앞의 평가대상이 undefined null 이면 평가를 멈추고 undefined 를 반환
  • 연산자가 아님. 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (Syntax Construct)
let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); 
alert( user?.address?.street );
1
2
3
4
  • 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
    • 위 예시에서는 user 의 address 와 street 가 필수값이 아니기 때문에 옵셔널 체이닝을 사용하였다.
  • 옵셔널 체이닝의 남용은 디버깅을 어렵게 할 수 있다
  • ?. 앞의 변수는 꼭 선언되어 있어야 한다.
    // ReferenceError: user is not defined
user?.address;
    1
    2
  • 단락 평가(short circuit)
    • ?. 왼쪽의 평가대상에 값이 없으면 즉시 평가를 멈춘다.
    • ?. 오른쪽의 부가 동작은 더이상 일어나지 않음.
    let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않습니다.

alert(x); // 0, x는 증가하지 않습니다.
    1
    2
    3
    4
    5
    6

# ?.() ?.[]

  • 옵셔널 체이닝은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (Syntax Construct) 이다.
let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
};

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();
1
2
3
4
5
6
7
8
9
10
let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined
1
2
3
4
5
6
7
8
9
10
11
12

# delete 와 옵셔널 체이닝

delete user?.name; // user가 존재하면 user.name을 삭제합니다.
1

# ?. 는 쓰기에 사용할 수 없다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.
1
2

← 객체 심볼 →